// 9.9包邮
.nine-nine {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background-color: #fff;
    .search-btn {
        color: #fff;
        font-size: 12px;
        height: 23px;
        padding: 0 6px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        padding-bottom: 2px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        border-radius: 11px;
        background: -webkit-gradient( linear, left top, right top, from(#ac7aef), to(#f2809f));
        background: -webkit-linear-gradient( left, #ac7aef, #f2809f);
        background: -moz-linear-gradient( left, #ac7aef, #f2809f);
        background: -o-linear-gradient( left, #ac7aef, #f2809f);
        background: linear-gradient( 90deg, #ac7aef, #f2809f);
    }
    .search {
        margin: 0 5px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: 32px;
        border-radius: 16px;
        background-color: #f2f2f2;
        padding: 0 10px;
        .txt {
            padding-left: 10px;
        }
    }
}
.nine-article {
    padding: 5px;
    .nine-list {
        &:nth-child(odd) {
            padding-right: 4px;
        }
        &:nth-child(even) {
            padding-left: 4px;
        }
        margin-bottom: 8px;
        .nine-list-main {
            padding: 5px;
            border-radius: 2px;
            border: 1px solid #eee;
            .nine-list-img {
                width: 100%;
                height: 0;
                /* 图片的高宽比 */
                padding-bottom: 100%;
                img {
                    width: 100%
                }
            }
            .nine-list-content {
                padding: 8px 0;
                .top {
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: -moz-box;
                    display: flex;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    -webkit-flex-direction: row;
                        -ms-flex-direction: row;
                            -moz-box-orient: horizontal;
                            -moz-box-direction: normal;
                         flex-direction: row;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                        -ms-flex-align: center;
                            -moz-box-align: center;
                         align-items: center;
                    .tags {
                        font-size: 12px;
                        border-radius: 2px;
                        margin-right: 2px;
                        padding: 0 3px;
                        color: #f50;
                        border: 1px solid #f50;
                        -webkit-transform: scale(.8);
                           -moz-transform: scale(.8);
                            -ms-transform: scale(.8);
                             -o-transform: scale(.8);
                                transform: scale(.8);
                    }
                    .title {
                        width: 120px;
                        padding-bottom: 0;
                    }
                }
                .bottom {
                    padding-top: 10px;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: -moz-box;
                    display: flex;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    -webkit-flex-direction: row;
                        -ms-flex-direction: row;
                            -moz-box-orient: horizontal;
                            -moz-box-direction: normal;
                         flex-direction: row;
                    -webkit-box-pack: justify;
                    -webkit-justify-content: space-between;
                        -ms-flex-pack: justify;
                            -moz-box-pack: justify;
                         justify-content: space-between;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                        -ms-flex-align: center;
                            -moz-box-align: center;
                         align-items: center;
                    .juan {
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: -moz-box;
                        display: flex;
                        -webkit-box-orient: horizontal;
                        -webkit-box-direction: normal;
                        -webkit-flex-direction: row;
                            -ms-flex-direction: row;
                                -moz-box-orient: horizontal;
                                -moz-box-direction: normal;
                             flex-direction: row;
                                -webkit-box-align: end;
                                -webkit-align-items: flex-end;
                                    -ms-flex-align: end;
                                        -moz-box-align: end;
                                     align-items: flex-end;
                        .price {
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: -moz-box;
                            display: flex;
                            -webkit-box-orient: horizontal;
                            -webkit-box-direction: normal;
                            -webkit-flex-direction: row;
                                -ms-flex-direction: row;
                                    -moz-box-orient: horizontal;
                                    -moz-box-direction: normal;
                                 flex-direction: row;
                            -webkit-box-align: end;
                            -webkit-align-items: flex-end;
                                -ms-flex-align: end;
                                    -moz-box-align: end;
                                 align-items: flex-end;
                            color: #f50;
                            .emb {
                                font-size: 16px;
                                -webkit-transform: scale(.7);
                                        -moz-transform: scale(.7);
                                         -ms-transform: scale(.7);
                                          -o-transform: scale(.7);
                                     transform: scale(.7);
                            }
                        }
                        .after {
                            padding-left: 3px;
                        }
                    }
                    .discount {
                        -webkit-box-sizing: border-box;
                                -moz-box-sizing: border-box;
                             box-sizing: border-box;
                        width: 52px;
                        height: 20px;
                        background: url(../assets/discount/juan-bg.png) no-repeat 50%;
                        -o-background-size: cover;
                           background-size: cover;
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: -moz-box;
                        display: flex;
                        -webkit-box-pack: center;
                        -webkit-justify-content: center;
                            -ms-flex-pack: center;
                                -moz-box-pack: center;
                             justify-content: center;
                        -webkit-box-align: center;
                        -webkit-align-items: center;
                            -ms-flex-align: center;
                                -moz-box-align: center;
                             align-items: center;
                    }
                }
            }
        }
    }
}

//详情页面
.discount-detail {
    .slide-img {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 250px;
        overflow: hidden;
        img {
            width: 100%;
            position: absolute;
        }
    }
    .detail {
        -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
             box-sizing: border-box;
        padding: 11px 10px;
        .top {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -moz-box;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
                -ms-flex-direction: row;
                    -moz-box-orient: horizontal;
                    -moz-box-direction: normal;
                 flex-direction: row;
            -webkit-box-align: center;
            -webkit-align-items: center;
                -ms-flex-align: center;
                    -moz-box-align: center;
                 align-items: center;
            .tags {
                padding: 2px 5px 2px;
                margin-right: 9px;
                background-color: #f50;
                border-radius: 4px;
            }
        }
        .md {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -moz-box;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
                -ms-flex-direction: row;
                    -moz-box-orient: horizontal;
                    -moz-box-direction: normal;
                 flex-direction: row;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
                -ms-flex-pack: justify;
                    -moz-box-pack: justify;
                 justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
                -ms-flex-align: center;
                    -moz-box-align: center;
                 align-items: center;
            .lt {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: -moz-box;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -webkit-flex-direction: row;
                    -ms-flex-direction: row;
                        -moz-box-orient: horizontal;
                        -moz-box-direction: normal;
                     flex-direction: row;
                -webkit-box-align: center;
                -webkit-align-items: center;
                    -ms-flex-align: center;
                        -moz-box-align: center;
                     align-items: center;
                .price {
                    color: var(--pink)037;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: -moz-box;
                    display: flex;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    -webkit-flex-direction: row;
                        -ms-flex-direction: row;
                            -moz-box-orient: horizontal;
                            -moz-box-direction: normal;
                         flex-direction: row;
                    -webkit-box-align: end;
                    -webkit-align-items: flex-end;
                        -ms-flex-align: end;
                            -moz-box-align: end;
                         align-items: flex-end;
                    .txt {
                        font-size: 22px;
                    }
                    .emb {
                        font-size: 16px;
                        -webkit-transform: scale(.8);
                                -moz-transform: scale(.8);
                                 -ms-transform: scale(.8);
                                  -o-transform: scale(.8);
                             transform: scale(.8);
                    }
                }
                .juan-after {
                    border: 1px solid var(--pink)037;
                    color: var(--pink)037;
                    width: 42px;
                    height: 17px;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: -moz-box;
                    display: flex;
                    -webkit-box-pack: center;
                    -webkit-justify-content: center;
                        -ms-flex-pack: center;
                            -moz-box-pack: center;
                         justify-content: center;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                        -ms-flex-align: center;
                            -moz-box-align: center;
                         align-items: center;
                    border-radius: 2px;
                    margin-left: 10px;
                    -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                         box-sizing: border-box;
                    padding-bottom: 1px;
                }
            }
            .juan {
                width: 60px;
                height: 25px;
                line-height: 25px;
                -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                     box-sizing: border-box;
                -o-background-size: 100%;
                   background-size: 100%;
                background-image: url(../assets/discount/juan-bg.png);
            }
        }
        .bb {
            padding-top: 10px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -moz-box;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
                -ms-flex-direction: row;
                    -moz-box-orient: horizontal;
                    -moz-box-direction: normal;
                 flex-direction: row;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
                -ms-flex-pack: justify;
                    -moz-box-pack: justify;
                 justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
                -ms-flex-align: center;
                    -moz-box-align: center;
                 align-items: center;
            .price {
                color: #ff2d31;
                font-size: 12px;
            }
        }
    }
    .tianjuan {
        .top-img {
            display: block;
            margin: 15px auto;
            width: 160px;
            height: 18px;
        }
        .main {
            padding: 10px;
            .juan-list {
                &:nth-child(odd) {
                    padding-right: 4px;
                }
                &:nth-child(even) {
                    padding-left: 4px;
                }
                margin-bottom: 8px;
                .juan-list-main {
                    padding: 5px;
                    border-radius: 2px;
                    border: 1px solid #eee;
                    .img {
                        width: 100%;
                        height: 0;
                        padding-bottom: 100%;
                        img {
                            width: 100%;
                        }
                    }
                    .juan-list-content {
                        padding: 8px 0;
                        .bottom {
                            padding-top: 10px;
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: -moz-box;
                            display: flex;
                            -webkit-box-orient: horizontal;
                            -webkit-box-direction: normal;
                            -webkit-flex-direction: row;
                                -ms-flex-direction: row;
                                    -moz-box-orient: horizontal;
                                    -moz-box-direction: normal;
                                 flex-direction: row;
                                -webkit-box-align: end;
                                -webkit-align-items: flex-end;
                                    -ms-flex-align: end;
                                        -moz-box-align: end;
                                     align-items: flex-end;
                                .price {
                                    color: var(--pink)037;
                                }
                                .after {
                                    padding-left: 5px;
                                    text-decoration: line-through;
                                }
                            

                        }
                    }
                }
            }
        }
    }
    .buy-btn {
        height: 45px;
        border-radius: 5px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: -moz-box;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                -moz-box-pack: center;
             justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                -moz-box-align: center;
             align-items: center;
        background-color: #f74239;
    }
}

// 大额卷
.discount {
    .banner {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 30%;
        img {
            width: 100%;
        }
        i {
            position: fixed;
            left: 10px;
            top: 10px;
            z-index: 9999;
        }
    }
    .search {
        color: #ccc;
        width: 320px;
        height: 32px;
        font-size: 15px;
        background-color: #fff;
        border-radius: 16px;
        -webkit-box-shadow: 0 3px 8px rgba(0,0,0, .1);
                box-shadow: 0 3px 8px rgba(0,0,0, .1);
        margin: -16px auto 0 auto;
        position: relative;
        z-index: 99;
        padding-left: 10px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        .txt {
            padding-left: 10px;
        }
    }
    .tab-main {
        padding-top: 16px;
    }
    
}

.discount-section {
    padding: 5px 12px;
    .discount-section-list {
        margin-bottom: 10px;
        padding: 5px;
        border-radius: 2px;
        .image {
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            img {
                width: 100%;
            }
        }
        .discount-section-list-content {
            padding-left: 10px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
               -moz-box-orient: vertical;
               -moz-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
               -moz-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            .top {
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box;
                .tips {
                    font-size: 12px;
                    border-radius: 2px;
                    margin-right: 6px;
                    padding: 0 3px;
                    color: #f50;
                    border: 1px solid #f50;
                    -webkit-transform: scale(.8);
                       -moz-transform: scale(.8);
                        -ms-transform: scale(.8);
                         -o-transform: scale(.8);
                            transform: scale(.8);
                    float: left;
                }
            }
            .md {
                padding-top: 10px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -webkit-flex-direction: row;
                   -moz-box-orient: horizontal;
                   -moz-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                   -moz-box-pack: justify;
                    -ms-flex-pack: justify;
                        justify-content: space-between;
                -webkit-box-align: center;
                -webkit-align-items: center;
                   -moz-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                .price {
                    color:var(--pink);
                    .emb {
                        font-size: 12px;
                        color: #aaa;
                    }
                }
                .discount {
                    font-size: 13px;
                    -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                         box-sizing: border-box;
                    width: 70px;
                    height: 22px;
                    background: url(../assets/discount/quan.png) no-repeat 50%;
                    -o-background-size: cover;
                       background-size: cover;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: -moz-box;
                    display: flex;
                    -webkit-box-pack: start;
                    -webkit-justify-content: flex-start;
                       -moz-box-pack: start;
                        -ms-flex-pack: start;
                            justify-content: flex-start;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                        -ms-flex-align: center;
                            -moz-box-align: center;
                         align-items: center;
                    span {
                        padding-left: 5px;
                    }
                }
            }
            .bb {
                padding-top: 10px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                   -moz-box-pack: justify;
                    -ms-flex-pack: justify;
                        justify-content: space-between;
                -webkit-box-align: center;
                -webkit-align-items: center;
                   -moz-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                .b-price {
                    text-decoration: line-through;
                }
            }
        }
    }
}

.search-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }